<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><style>.box {
            width: 1000px;
            margin: 60px auto;
            background: url(../static/img/login_bg.jpg) no-repeat;
        }
        
        .register {
            display: flex;
            justify-content: center;
            align-self: center;
            margin-left: 300px;
        }
        
        .toast {
            width: 400px;
            border: solid 2px #fff;
            border-radius: 4px;
            padding: 20px;
            position: relative;
            height: 270px;
            background: #eee;
        }
        
        .toast label {
            font-size: 20px;
            color: #333;
            margin: 25px 0;
            display: block;
        }
        
        .toast label input {
            width: 150px;
            height: 30px;
        }
        
        #sub1 {
            display: block;
            left: 50%;
            margin-left: -50px;
            width: 100px;
            position: absolute;
            text-align: center;
            height: 40px;
            background-color: peru;
            color: #f1f1f1;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            outline: none;
            cursor: pointer;
        }
        
        .first {
            line-height: 50px;
            text-align: center;
            width: 150px;
            height: 50px;
            margin: 50px auto;
            border-radius: 10px;
            background-color: #ccc;
        }
        
        .first a {
            font-size: 30px;
            color: #999999;
            text-decoration: none;
        }
        
        .first a:hover {
            color: goldenrod;
        }
        
        span {
            color: #666;
            font-size: 12px;
        }</style></head><body><div class="first"><a href="login.html">去登录</a></div><div class="box"><div class="register"><div class="toast"><label for="msg1">用&nbsp;&nbsp;户&nbsp;&nbsp;名：<input type="text" id="user"><span>请输入4-12位字母</span></label> <label for="msg2">手&nbsp;&nbsp;机&nbsp;&nbsp;号：<input type="text" id="tel"><span>请输入首位为1的11位数字</span></label> <label for="msg3">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text" id="pass"><span>请输入4-6位数字</span></label> <input type="submit" value="提交注册" id="sub1"><span id="msg"></span></div></div></div></body><script src="../js/ajax-promise.js"></script><script>window.onload = function() {
        var user = document.querySelector(".box .register .toast #user");
        var tel = document.querySelector(".box .register .toast #tel");
        var pass = document.querySelector(".box .register .toast #pass");
        var regUser = /^[a-z]{4,12}$/i;
        var regTel = /^1[0-9]{10}$/;
        var regPass = /[\d]{4,6}/;
        Reg(user, regUser);
        Reg(tel, regTel);
        Reg(pass, regPass);

        function Reg(ele, reg) {
            ele.onblur = function() {
                if (reg.test(this.value)) {
                    this.nextElementSibling.innerHTML = ' 恭喜您输入正确';
                } else {
                    this.nextElementSibling.innerHTML = ' 输入错误';
                }
            }
        }
    }</script><script src="../js/ajax-promise.js"></script><script>class Register {
        constructor() {
            this.user = document.querySelector(".box .register .toast #user");
            this.tel = document.querySelector(".box .register .toast #tel");
            this.pass = document.querySelector(".box .register .toast #pass");
            this.sub1 = document.querySelector(".box .register .toast #sub1");
            this.msg = document.querySelector(".box .register .toast #msg");
            this.url = "http://api.icodeilife.cn:81/user";
            this.addEvent();
        }
        addEvent() {
            var that = this;
            this.sub1.onclick = function() {
                that.u = that.user.value;
                that.t = that.tel.value;
                that.p = that.pass.value;
                that.load();
            }
        }
        load() {
            ajax({
                url: this.url,
                data: {
                    type: "register",
                    user: this.u,
                    tel: this.t,
                    pass: this.p
                }
            }).then((res) => {
                // console(res);
                this.res = JSON.parse(res);
                this.display();
            });
        }
        display() {
            if (this.res.code == 1) {
                this.msg.innerHTML = this.res.msg + ",3秒后到登录页面";
                setTimeout(() => {
                    location.href = "login.html";
                }, 3000);
            } else {
                this.msg.innerHTML = this.res.msg;
            }
        }

    }
    new Register();</script></html>